<template>
	<view style="overflow: hidden;">
		<view class="tm">
			条码:
			<input type="text" :disabled="true" v-model="tm">
			<!-- <button @tap="saomiao">扫描</button> -->
		</view>
		<view>
			<view>
				<view style="display: flex;height: 80upx;">
					<view class="ckInfo">
						<text>货号:</text>
						<input type="text" :disabled="true" v-model="bbreed">
					</view>
					<view class="ckInfo">
						<text style="width: 250upx;">颜色:</text>
						<input type="text" :disabled="true" v-model="color">
					</view>
				</view>
			</view>
			<view>
				<view style="display: flex;height: 80upx;">
					<view class="ckInfo">
						<text>尺码:</text>
						<input type="text" :disabled="true" v-model="chima">
					</view>
					<view class="ckInfo">
						<text style="width: 250upx;">数量:</text>
						<input type="text" :disabled="true" v-model="sl">
					</view>
				</view>
			</view>
			<view style="display: flex;justify-content: space-between;margin-bottom: 20rpx;">
				<button class="sure" @tap="saveInfo" :disabled="saveflag">确认</button>
				<!-- <button class="sure" style="background-color: #F0301F;" @tap="del">删除</button> -->
			</view>
		</view>
		<view class="btminfo">
			<t-table style='width: 100%;z-index: 10;'>
				<t-tr>
					<t-td style="flex: 1;">货号</t-td>
					<t-td style="flex: 0 0 120upx;">颜色</t-td>
					<t-td style="flex: 0 0 100upx;">尺码</t-td>
					<t-td style="flex: 0 0 100upx;">数量</t-td>
					<t-td style="flex: 0 0 200upx;">sku条码</t-td>
					<!-- <t-td>订单号</t-td> -->
				</t-tr>
				<t-tr v-for="(item,index) in arr" :key="index">
					<t-td style="flex: 1;word-break: break-word;">{{item.bbreed}}</t-td>
					<t-td style="flex: 0 0 120upx;word-break: break-word;">{{item.color}}</t-td>
					<t-td style="flex: 0 0 100upx;word-break: break-word;">{{item.chima}}</t-td>
					<t-td style="flex: 0 0 100upx;word-break: break-word;">{{item.kcsl}}</t-td>
					<t-td style="flex: 0 0 200upx;word-break: break-word;">
						{{item.sku}}
					</t-td>
				</t-tr>
			</t-table>
		</view>
		<view style="text-align: center;color: #f0301f;font-size: 40upx;border-top: 1px solid #ccc;">
			已扫描{{arr.length}}个条码
		</view>
		<scanCode></scanCode>
	</view>
</template>


<script>
	import scanCode from '@/static/scan-code/scan-code.vue';
	// import Voice from '@/static/voice.js'; //语音文件
	import axios from '@/static/axios.js';
	import tTable from '@/static/t-table/t-table.vue'
	import tTh from '@/static/t-table/t-th.vue'
	import tTr from '@/static/t-table/t-tr.vue'
	import seach from '@/static/mSeach/mSeach.vue'
	import tTd from '@/static/t-table/t-td.vue'
	const TTSSpeech = uni.requireNativePlugin("MT-TTS-Speech");
	export default {
		components: {
			scanCode,
			tTable,
			tTh,
			tTr,
			tTd,
			seach
		},
		data() {
			return {
				tm: '',
				num: 0,
				arr: [],
				sl: '',
				color: '',
				chima: '',
				bbreed: '',
				url: '',
				uname:'',
				pinpai: '',
				uid: '',
				check: false,
				saveflag: false,
				hzData: [],
			}
		},
		onLoad(r) {
			this.url = uni.getStorageSync('url') == '' ? this.websiteUrl : uni.getStorageSync('url')
			this.uid = uni.getStorageSync('id')
			this.uname = uni.getStorageSync('uname')
			TTSSpeech.init((status) => {
				if (status === 0) {
					// console.log('引擎初始化成功')
				}
			}, 'com.iflytek.speechcloud')
			var _this = this
			uni.$off('scancodedate')
			uni.$on('scancodedate', function(content) {
				console.log(content);
				_this.tm = content
				_this.getBarcodeInfo()
			})
		},
		methods: {
			getBarcodeInfo() {
				if(this.arr.some(item => item.kctype == this.tm)){
					uni.showToast({
						title:'此条码已扫描',
						icon:'none',
						duration:2000
					})
					TTSSpeech.speak({
						text: '此条码已扫描'
					})
					return
				}
				uni.request({
					url: `http://${this.url}/bService.asmx/GetDbBarcode`,
					method: 'GET',
					data: {
						barcode: this.tm
					},
					success: (r) => {
						console.log(r);
						this.bbreed = r.data.data[0].bbreed
						this.color = r.data.data[0].color
						this.chima = r.data.data[0].chima
						this.sl = r.data.data[0].kcsl
						this.arr = this.arr.concat(r.data.data)
					}
				})
			},
			saveInfo() {
				if(this.arr.length == 0){
					uni.showToast({
						title:'请先扫码',
						icon:'none',
						duration:2000
					})
					TTSSpeech.speak({
						text: '请先扫码'
					})
					return
				}
				this.saveflag = true
				let temp = []
				this.arr.forEach(item => {
					if (!temp.includes(item.barcode)) {
						temp.push(item.barcode)
					}
				})
				let str = temp.join(',')
				console.log(str,this.uname);
				uni.request({
					url: `http://jstjk.ywhzsoft.com:9002/api/feixiang/db `,
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						barcode: str,
						username:this.uname
					},
					success: (r) => {
						if(r == '调拨完成'){
							uni.showToast({
								title:'调拨完成',
								icon:'none',
								duration:2000
							})
							TTSSpeech.speak({
								text: '调拨完成'
							})
							this.bbreed = ''
							this.color = ''
							this.chima = ''
							this.sl = ''
							this.arr = []
						} else {
							uni.showToast({
								title: r.data.data,
								icon:'none',
								duration:2000
							})
							TTSSpeech.speak({
								text: r.data.data
							})
						}
					},
					complete: () => {
						this.saveflag = false
					}
				})

			}
		}
	}
</script>

<style>
	.tm {
		height: 8vh;
		padding: 0 10upx;
		display: flex;
		align-items: center;
		width: 100%;
		font-size: 40upx;
	}

	.tm input {
		border: 1px solid #ccc;
		border-radius: 6upx;
		width: 81%;
		margin-left: 18upx;
	}

	.tm button {
		height: 60upx;
		line-height: 60upx;
		background-color: #4ec7eb;
		color: #FFFFFF;
		width: 21%;
	}

	.btminfo {
		height: calc(100vh - 400upx);
		overflow-y: auto;
	}

	.ckInfo {
		display: flex;
		align-items: center;
		padding: 0 10upx;
		width: 50%;
	}

	.ckInfo text {
		display: inline-block;
		width: 200upx;
	}

	.ckInfo input {
		border: 1px solid #CCCCCC;
		border-radius: 6upx;
	}

	.sure {
		height: 80upx;
		line-height: 80upx;
		color: #FFFFFF;
		background-color: #4ec7eb;
		width: 70%;
	}

	uni-forms-item {
		width: 100%;
	}

	.active {
		background: #4ec7eb;
		color: #fff;
	}
</style>